<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/components.css">

</head>

<body>
<div class="nav">
    <div class="logo-container">
        <div class="logo-icon">B</div>
        <span class="blog-title">我的博客系统</span>
    </div>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
    <a class="nav-span" href="#" onclick="logout()">注销</a>
</div>

<div class="container">
    <div class="left">
        <div class="card">
            <img src="pic/doge.jpg" alt="">
            <h3></h3>
            <a href="#">GitHub 地址</a>
            <div class="row">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="row">
                <span id="articleCount">0</span>
                <span>1</span>
            </div>
        </div>
    </div>
    <div class="right">
        <div id="blogListContainer" class="slide-in-left">
            <div class="loading-placeholder">
                <div class="loading-spinner"></div>
                <span>加载中...</span>
            </div>
        </div>
        <div id="emptyState" style="display: none; text-align: center; padding: 50px; color: #666;" class="fade-in-up">
            <img src="pic/empty.png" alt="暂无数据" style="width: 100px; height: 100px; opacity: 0.5; margin-bottom: 20px;" onerror="this.style.display='none'">
            <p>暂无博客文章</p>
            <a href="blog_edit.html" style="color: #007bff; text-decoration: none;">去写一篇博客吧！</a>
        </div>
        <div class="blog-stats fade-in-up" style="margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.9); border-radius: 12px; text-align: center; color: #666; font-size: 14px;">
            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px;">
                <div>
                    <strong style="color: #007bff; font-size: 18px;" id="totalBlogs">0</strong><br>
                    <span>总文章数</span>
                </div>
                <div>
                    <strong style="color: #28a745; font-size: 18px;" id="todayDate">--</strong><br>
                    <span>今日日期</span>
                </div>
                <div>
                    <strong style="color: #ffc107; font-size: 18px;" id="lastUpdate">--</strong><br>
                    <span>最新更新</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // jQuery 加载失败的备用方案
    if (typeof jQuery === 'undefined') {
        document.write('<script src="blog-editormd/lib/jquery.min.js"><\/script>');
    }
</script>
<script src="js/common.js"></script>
<script>
    // 初始化页面
    $(document).ready(function() {
        getBlogList();
        getUserInfo();
    });

    function getUserInfo() {
        const userId = localStorage.getItem("loginUserId");
        if (!userId) {
            showMessage('未找到用户信息，请重新登录', 'warning');
            setTimeout(() => {
                location.href = 'blog_login.html';
            }, 1500);
            return;
        }
        
        const url = "/user/getUserInfo?userId=" + userId;
        $.ajax({
            type: "get",
            url: url,
            success: function(result) {
                if (result != null && result.code && result.code.toString() === "SUCCESS" && result.data != null) {
                    const userInfo = result.data;
                    $(".left .card h3").text(userInfo.username || '用户');
                    if (userInfo.githubUrl) {
                        $(".left .card a").attr("href", userInfo.githubUrl).show();
                    } else {
                        $(".left .card a").hide();
                    }
                } else {
                    console.warn("获取用户信息失败:", result?.errMsg || '未知错误');
                }
            },
            error: function(xhr, status, error) {
                console.error("获取用户信息失败:", error);
            }
        });
    }

    function getBlogList() {
        $(".loading-placeholder").show();
        $("#emptyState").hide();
        
        $.ajax({
            type: "get",
            url: "/blog/getList",
            success: function(result) {
                $(".loading-placeholder").hide();
                
                // 验证后端结果 - 修复响应格式判断
                if (result && result.code && result.code.toString() === "SUCCESS" && result.data != null) {
                    if (Array.isArray(result.data) && result.data.length > 0) {
                        let finalHtml = "";
                        let lastUpdateTime = null;
                        
                        for (const blogInfo of result.data) {
                            const formattedDate = formatDate(blogInfo.createTime);
                            const truncatedContent = truncateText(blogInfo.content, 120);
                            
                            // 记录最新更新时间
                            if (!lastUpdateTime || new Date(blogInfo.createTime) > new Date(lastUpdateTime)) {
                                lastUpdateTime = blogInfo.createTime;
                            }
                            
                            finalHtml += '<div class="blog fade-in-up">';
                            finalHtml += '<div class="title">' + (blogInfo.title || '无标题') + '</div>';
                            finalHtml += '<div class="date">' + formattedDate + '</div>';
                            finalHtml += '<div class="desc">' + truncatedContent + '</div>';
                            finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blogInfo.id + '">查看全文 &raquo;</a>';
                            finalHtml += '</div>';
                        }
                        $("#blogListContainer").html(finalHtml);
                        
                        // 更新统计信息
                        $("#articleCount").text(result.data.length);
                        $("#totalBlogs").text(result.data.length);
                        $("#lastUpdate").text(lastUpdateTime ? formatDate(lastUpdateTime).split(' ')[0] : '--');
                        
                    } else {
                        // 无数据时显示空状态
                        $("#blogListContainer").empty();
                        $("#emptyState").show();
                        $("#articleCount").text(0);
                        $("#totalBlogs").text(0);
                    }
                } else {
                    // 无数据时显示空状态
                    $("#blogListContainer").empty();
                    $("#emptyState").show();
                    $("#articleCount").text(0);
                    $("#totalBlogs").text(0);
                }
                
                // 设置今日日期
                $("#todayDate").text(new Date().toLocaleDateString());
            },
            error: function(xhr, status, error) {
                $(".loading-placeholder").hide();
                showMessage("加载博客列表失败，请刷新页面重试", "error");
                $("#emptyState").show();
                $("#emptyState p").text("加载失败，请刷新页面重试");
                $("#emptyState a").hide();
            }
        });
    }
</script>
</body>

</html>